<template>
	<view class="release">
		<u-form :model="form" ref="uForm">
			<u-form-item label="产品名称" label-width="150">
				<u-input v-model="form.sex" type="select" @click="show = true" />
			</u-form-item>
			<u-form-item label="产品价格" label-width="150">
				<u-input v-model="form.intro" />
			</u-form-item>
			<u-form-item label="产品数量" label-width="150">
				<u-input v-model="form.intro" />
			</u-form-item>
			<u-form-item label="产品品牌" label-width="150">
				<u-input v-model="form.sex" type="select" @click="show = true" />
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="产品地区" prop="region" label-width="150">
				<u-input :border="border" type="select" :select-open="pickerShow" v-model="form.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
			</u-form-item>
			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}"  label="发布时间" prop="phone" label-width="150">
				<u-input :border="border" placeholder="" v-model="form.time" type="number" disabled="true"></u-input>
			</u-form-item>
			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" label="联系电话" prop="phone" label-width="150">
				<u-input :border="border" placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
			</u-form-item>
			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" label="商家介绍" prop="phone" label-width="150">
				<u-input :border="border" placeholder="快来输编辑商家简介吧！" v-model="form.phone" type="textarea"></u-input>
			</u-form-item>
			<view>
				<view class="t_name">
					发布形式
				</view>
				<view class="">
					<u-radio-group v-model="radio">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="row-voucher b-f m-top20">
			  <view class="row-title">产品图片</view>
			  <view class="image-list">
			    <!-- 图片列表 -->
			    <view class="image-preview" v-for="(image, imageIndex) in imageList" :key="imageIndex">
			      <text class="image-delete iconfont icon-shanchu" @click="deleteImage(imageIndex)"></text>
			      <image class="image" mode="aspectFill" :src="image.path"></image>
			    </view>
			    <!-- 上传图片 -->
			    <view v-if="imageList.length < maxImageLength" class="image-picker" @click="chooseImage()">
			      <text class="choose-icon iconfont icon-camera"></text>
			      <text class="choose-text">上传图片</text>
			    </view>
			  </view>
			</view>
			<!-- 商家图片上传 -->
			<view class="row-voucher b-f m-top20">
			  <view class="row-title">商家图片上传</view>
			  <view class="image-list">
			    <!-- 图片列表 -->
			    <view class="image-preview" v-for="(image, imageIndex) in imageList" :key="imageIndex">
			      <text class="image-delete iconfont icon-shanchu" @click="deleteImage(imageIndex)"></text>
			      <image class="image" mode="aspectFill" :src="image.path"></image>
			    </view>
			    <!-- 上传图片 -->
			    <view v-if="imageList.length < maxImageLength" class="image-picker" @click="chooseImage()">
			      <text class="choose-icon iconfont icon-camera"></text>
			      <text class="choose-text">上传图片</text>
			    </view>
			  </view>
			</view>
			
			
		</u-form>
		
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
		
		
		<view class="btnSub">
			<view class="text_S">
				保存修改
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					intro: '',
					sex: '',
					region:'',
					phone:'',
					time:'1'
				},
				// 用户选择的图片列表
				imageList: [],
				// 最大图片数量
				maxImageLength:6,
				checkboxList: [{
						name: '苹果',
						checked: false,
						disabled: false
					},
					{
						name: '雪梨',
						checked: false,
						disabled: false
					},
					{
						name: '柠檬',
						checked: false,
						disabled: false
					}
				],
				radioList: [{
						name: '出（卖）',
						disabled: false
					},
					{
						name: '求（购）',
						disabled: false
					}
				],
				radio: '',
				switchVal: false,
				show: false,
				list: [
					{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				pickerShow:false
			}
		},
		mounted() {
			this.getDate()
		},
		methods: {
			change(e) {
				console.log('change', e);
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			confirm(e) {
				console.log(e);
				console.log(e[0].label)
				this.form.sex=e[0].label
			},
			// 选择地区回调
			regionConfirm(e) {
				this.form.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			
			// 获取日期
			getDate(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth()+1;
				var day = date.getDate()
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				//修改日期格式
				if (day >= 0 && day <= 9) {
					day = "0" + day;
				}
				console.log(year+'-'+month+'-'+day)
				this.form.time = year+'-'+month+'-'+day
			},
			
			chooseImage() {
			  const app = this
			  const oldImageList = app.imageList
			  // 选择图片
			  uni.chooseImage({
			    count: 9,
			    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			    success({ tempFiles }) {
			      // tempFiles = [{path:'xxx', size:100}]
			      app.imageList = oldImageList.concat(tempFiles)
			    }
			  });
			},
			
			// 删除图片
			deleteImage(imageIndex) {
			  this.imageList.splice(imageIndex, 1)
			},
			// 表单提交
			handleSubmit() {
			  const app = this
			  const { imageList } = app
			  // 判断是否重复提交
			  if (app.disabled === true) return false
			  // 按钮禁用
			  app.disabled = true
			  // 判断是否需要上传图片
			  if (imageList.length > 0) {
			    app.uploadFile()
			      .then(() => app.onSubmit())
			      .catch(err => {
			        app.disabled = false
			        if (err.statusCode !== 0) {
			          app.$toast(err.errMsg)
			        }
			        console.log('err', err)
			      })
			  } else {
			    app.onSubmit()
			  }
			},
			
			// 提交到后端
			onSubmit() {
			  const app = this
			  RefundApi.apply(app.orderGoodsId, app.formData)
			    .then(result => {
			      app.$toast(result.message)
			      setTimeout(() => {
			        app.disabled = false
			        uni.navigateBack()
			      }, 1500)
			    })
			    .catch(err => app.disabled = false)
			},
			
			// 上传图片
			uploadFile() {
			  const app = this
			  const { imageList } = app
			  // 批量上传
			  return new Promise((resolve, reject) => {
			    if (imageList.length > 0) {
			      UploadApi.image(imageList)
			        .then(fileIds => {
			          app.form.images = fileIds
			          resolve(fileIds)
			        })
			        .catch(reject)
			    } else {
			      resolve()
			    }
			  })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.release {
		/* height: 100vh; */
		background-color: #fff;
		padding: 30rpx;
	}

	.line {
		width: 686rpx;
		height: 1rpx;
		background: #F5F5F5;
		margin: 20rpx auto;
	}
	
	.t_name{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin: 50rpx 0rpx;
	}
	
	
	// 上传凭证
	.row-voucher {
	  // padding: 24rpx 20rpx;
	  .row-title{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin: 50rpx 0rpx;
	  }
	  .image-list {
	    // padding: 0 20rpx;
	    margin-top: 20rpx;
	    margin-bottom: -20rpx;
	
	    &:after {
	      clear: both;
	      content: " ";
	      display: table;
	    }
	
	    .image {
	      display: block;
	      width: 100%;
	      height: 100%;
	    }
	
	    .image-picker,
	    .image-preview {
	      width: 184rpx;
	      height: 184rpx;
	      margin-right: 60rpx;
	      margin-bottom: 30rpx;
	      float: left;
	
	      &:nth-child(3n+0) {
	        margin-right: 0;
	      }
	    }
	
	    .image-picker {
	      display: flex;
	      flex-direction: column;
	      justify-content: center;
	      align-items: center;
	      // border: 1rpx dashed #ccc;
	      color: #ccc;
		  border-radius: 10rpx;
		  background-color: #f5f5f5;
	
	      .choose-icon {
	        font-size: 48rpx;
	        margin-bottom: 6rpx;
	      }
	
	      .choose-text {
	        font-size: 24rpx;
	      }
	    }
	
	    .image-preview {
	      position: relative;
	
	      .image-delete {
	        position: absolute;
	        top: -15rpx;
	        right: -15rpx;
	        height: 42rpx;
	        width: 42rpx;
	        line-height: 42rpx;
	        background: rgba(0, 0, 0, 0.64);
	        border-radius: 50%;
	        color: #fff;
	        font-weight: bolder;
	        font-size: 22rpx;
	        z-index: 10;
	        text-align: center;
	      }
	    }
	  }
	}
	.btnSub{
		width: 566rpx;
		height: 80rpx;
		background: #0050D0;
		border-radius: 40rpx;
		margin: 0 auto;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		display: flex;
		justify-content: space-evenly;
		margin-top: 40rpx;
	}
	.text_S{
		text-align: center;
	}
</style>
